<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>wt_Timeline</title>
    <style>
        #timeline {
            position: fixed;
            bottom: 14px;
            left: 178px;
        }
        .box {
            width: 100%;
            height: 42px;
            background: rgba(10, 34, 66, 0.65);
            /* background: rgba(161, 167, 163, 0.65); */
            box-shadow: inset 0px 1px 12px 0px rgba(75, 137, 255, 0.5);
            border-radius: 4px;
            border: 1px solid #57c8ee;
            position: fixed;
            bottom: 15px;
        }
        /*表盘*/
        .img {
            position: fixed;
            bottom: 15px;
            left: 15px;
            display: inline-block;
            margin-right: 100px;
            /* border: 1px solid red; */
            width: 150px;
            height: 120px;
            background-image: url("./img/表盘仪.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-size: 12px;
        }
        #content{
            width: 200px;
            position: fixed;
            height: 200px;
            bottom:200px;
            left: 10px;
            z-index: 99;
        }
        #img4 {
            position: fixed;
            bottom: 37px;
            /*left: 202px;*/
            right: 30.8%;
            width: 18px;
            cursor: pointer;
            transform: rotate(180deg)
        }

    </style>
</head>

<body style="background: #0e1727;" >
    <!-- <div>
        <div id="content" style="color:#FFF;">111</div>
    </div> -->
    <div>
         <!-- <input type="<time datetime="YYYY/MM/DDThh:mm:ss" style="color: #FFF;" ></time>" name="" value=""> -->
       <!-- <input type="date"/> -->
       <label for="date-string" style="color: #fff;">开始时间:</label>
       <input type="date" id="date-string"  name="date-string"/>
       <input type="time"  id="time-string" name="time-string" step="1">

       <label for="date2-string" style="color: #fff;margin-left: 20px;">结束时间:</label>
       <input type="date" id="date2-string"  name="date2-string"/>
       <input type="time"  id="time2-string" name="time2-string" step="1">
       <button id="confirm" style="margin-left:30px;">确定</button>
    </div>
    

    <div style="margin: 0;padding: 0; margin-left:170px;" class="box">

        <div class="img">
            <div id="speed" style="margin-top: 30px;display: inline-block">1</div><span>xx</span>
            <div id="text" style="margin-top: 5px">2022年08月15日</div>
            <div id="time">09:23:00</div>
            <div style="margin-top: 10px;">
                <!-- <img id="img0" src="./img/表盘仪箭头.png" /> -->
                <img id="img3" src="./img/快退.png" draggable="false" />

                <!-- draggable="false" 禁止图片拖拽 -->
                <img id="img2" src="./img/开始.png" draggable="false" />
                <!--<img id="img21" style="display: none" src="./img/暂停.png" draggable="false" />-->
                <img id="img1" src="./img/快进.png" draggable="false" />
            </div>
        </div>

        <canvas id="timeline" width="1400" height="42"
            style="cursor: pointer;border:1px solid rgba(43,47,51,0);background-color: rgba(31,53,80,0);"
            ondragstart="return false;"></canvas>
        <!-- <img id="img4" src="./img/时间轴定位.png" draggable="false"/> -->

        <br>
        <script src="./jquery-1.10.2.js"></script>
        <script src="./timeline-canvas.js"></script>
        <script src="./yiBiaoPan.js"></script>
        <script>
            //补0操作
            function getzf(num) {
                if (parseInt(num) < 10) {
                    num = '0' + num;
                }
                return num;
            }
            //转时间
            function getLocalTime(time) {
                var date = new Date(time);
                console.log(date,"时间")
                var h = date.getHours();
                var m = date.getMinutes();
                var s = date.getSeconds();
                console.log(getzf(h) + ':' + getzf(m) + ':' + getzf(s))                
                return getzf(h) + ':' + getzf(m) + ':' + getzf(s);
            }
            //转年月日
            function changeTime(time) {
                var newTime = new Date(time);
                var year = newTime.getFullYear();
                var month = newTime.getMonth() + 1;
                if (month < 10) {
                    var month = "0" + month;
                }
                var date = newTime.getDate();
                if (date < 10) {
                    var date = "0" + date;
                }
                return year + "年" + month + "月" + date + "日"
            }

             //转年月日
             function changeTime1(time) {
                var newTime = new Date(time);
                var year = newTime.getFullYear();
                var month = newTime.getMonth() + 1;
                if (month < 10) {
                    var month = "0" + month;
                }
                var date = newTime.getDate();
                if (date < 10) {
                    var date = "0" + date;
                }
                return year + "/" + month + "/" + date 
            }





            //鼠标移动仪表盘箭头
            $("#img0").mousedown(function (d) {
                var pointA={}
                var pointB={}
                var pointC={}
                pointA.x=document.getElementsByClassName('img')[0].offsetLeft+(document.getElementsByClassName('img')[0].clientWidth/2)
                pointA.y=document.getElementsByClassName('img')[0].offsetTop+(document.getElementsByClassName('img')[0].clientHeight/2)
                pointB.x=d.clientX
                pointB.y=d.clientY
                //console.log("pointA")
                //console.log(document.getElementsByClassName('img')[0].clientWidth)

                var isdown=true
                var allA=0
                document.onmousemove=function (m) {
                    m.preventDefault && m.preventDefault() //去掉浏览器原始的
                    if(isdown){
                        pointC.x=m.clientX
                        pointC.y=m.clientY
                        var AB={}
                        var AC={}
                        AB.x=(pointB.x-pointA.x);
                        AB.y=(pointB.y-pointA.y);
                        AC.x=(pointC.x-pointA.x);
                        AC.y=(pointC.y-pointA.y);
                        var direct=(AB.x*AC.y)-(AB.y*AC.x);
                        var lengthAB=Math.sqrt(Math.pow(pointA.x-pointB.x,2)+Math.pow(pointA.y-pointB.y,2)),
                            lengthAC=Math.sqrt(Math.pow(pointA.x-pointC.x,2)+Math.pow(pointA.y-pointC.y,2)),
                            lengthBC=Math.sqrt(Math.pow(pointB.x-pointC.x,2)+Math.pow(pointB.y-pointC.y,2));
                        var cosA=(Math.pow(lengthAB,2)+Math.pow(lengthAC,2)-Math.pow(lengthBC,2))/(2*lengthAB*lengthAC);
                        var angleA=Math.round(Math.acos(cosA)*180/Math.PI);
                        if (direct<0){
                            allA-=angleA;
                        }else {
                            allA+=angleA;
                        }
                        $('#img0').css('top',pointC.y)
                        $('#img0').css('left',pointC.x)
                        $('#img0').css('transform','rotate('+allA+'deg)')
                        console.log("allA")
                        console.log(allA)
                        pointB.x=pointC.x
                        pointB.y=pointC.y

                    }
                }
                document.onmouseup=function (u) {
                    console.log("onmouseup")
                    isdown=false

                }
            })
            var setTimeMove = null;
            //滑动时间轴事件
            $("#timeline").mousedown(function () {
                $('#img2')[0].src="./img/开始.png"
                clearInterval(timeRun)
                var isdown=true
                document.onmousemove=function (v) {
                    if(isdown){
                        
                        a = returnMouseupTime();//时间戳
                        var b = changeTime(a)
                        var c = getLocalTime(a)
                        console.log("HTML页面内")
                        console.log(a,"a")
                        console.log(c,"b")
                        console.log(b,"c")
                        $("#text").text(b);
                        $("#time").text(c);
                        $("#img4").text(c);
                    }
                }
                document.onmouseup=function (u) {
                    console.log("onmouseup")
                    console.log(u,"u")
                    isdown=false

                }

            })
            var timeRun;
            var timeRun2;
            var timeRun3;
            var a ;//圆盘时间
            var flag=false
            //点击开始按钮
            $('#img2').click(function () {
                clearInterval(timeRun)
                flag=!flag
                if(flag){
                    $('#img2')[0].src="./img/暂停.png"
                  
                    timeRun=setInterval(function () {
                        a=a+1000
                        var b = changeTime(a)
                        var c = getLocalTime(a)
                        $("#text").text(b);
                        $("#time").text(c);
                        // set_time_to_middle(new Date().getTime())
                        console.log(changeTime(a),getLocalTime(a),"5")
                        console.log( b + a ,"5----")
                        console.log( $("#text").text(b).context.lastModified, $("#time").text(c),"5")
                       
                        // let data1  =  $("#text").text(b).context.lastModified
                        // console.log( data1,"5")
                        console.log(new Date().getTime(),"55")
                      
                        set_time_to_middle(new Date().getTime())
                    },1000)
                }else {
                    $('#img2')[0].src="./img/开始.png"
                    clearInterval(timeRun)
                }
            })
            //点击快进
            $('#img1').click(function () {
                $('#img2')[0].src="./img/开始.png"
                clearInterval(timeRun)
                $("#speed").text(parseInt($("#speed").text())+1);
                
                timeRun2=setInterval(function () {
                        a=a+1000
                        var b = changeTime(a)
                        var b1 = changeTime1(a)
                        var c = getLocalTime(a)
                        $("#text").text(b);
                        $("#time").text(c);
                        console.log( $("#text").text(b).context.lastModified, $("#time").text(c),"5")
                       
                        var data1  = changeTime1(a) +" "+ getLocalTime(a)
                        // 2022年11月01日15:05:03 2222
                        console.log(data1,"2222");
                        // set_time_to_middle(new Date().getTime())
                        // set_time_to_middle(new Date().getTime()) 
                        set_time_to_middle(new Date(data1).getTime()) 
                    },1000/2)

            })
            //点击快退
            $('#img3').click(function () {
                $('#img2')[0].src="./img/开始.png"
                clearInterval(timeRun)
                clearInterval(timeRun2)
                $("#speed").text(parseInt($("#speed").text())-1);

                timeRun3=setInterval(function () {
                        a=a+1000
                        var b = changeTime(a)
                        var c = getLocalTime(a)
                        $("#text").text(b);
                        $("#time").text(c);
                        // set_time_to_middle(new Date().getTime())
                        // set_time_to_middle(new Date().getTime()) 
                        set_time_to_middle(new Date().getTime()) 
                    },1000*2)
            })

            window.onload=function(){
                a=new Date().getTime()
                var b = changeTime(a)
                var c = getLocalTime(a)
                $("#text").text(b);
                $("#time").text(c);
                set_time_to_middle(new Date().getTime())

                // main()
            }
            //禁止图片选中
            document.onmousemove = function (ev) {
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }


            // 确定按钮事件
            $('#confirm').click(function (){
                var dateStringInput = document.querySelector('#date-string');
                var timeStringInput = document.querySelector('#time-string');
 
            // dateStringInput.addEventListener('input', function () {
                console.log(dateStringInput.value,"11");
                // console.log(dateStringInput.valueAsDate.toString());
            // });
            // timeStringInput.addEventListener('input', function () {
                console.log(timeStringInput.value,"22");
                // console.log(timeStringInput.valueAsDate.toString());
            // });

            var chooseStartTime =dateStringInput.value + " " +timeStringInput.value
            // console.log(chooseStartTime,"33");
            chooseStartTime = chooseStartTime.substring(0,19)
            // console.log(chooseStartTime,"44");
            chooseStartTime = chooseStartTime.replace(/-/g,'/');
            // console.log(chooseStartTime,"55");

            var showchooseStartTime  = new Date(chooseStartTime).getTime()
            var bb = changeTime(showchooseStartTime)
                var cc = getLocalTime(showchooseStartTime)
                $("#text").text(bb);
                $("#time").text(cc);
                set_time_to_middle(new Date(showchooseStartTime).getTime())

        //  window.onload=function(){
        //         a=new Date().getTime()
        //         var b = changeTime(a)
        //         var c = getLocalTime(a)
        //         $("#text").text(b);
        //         $("#time").text(c);
        //         set_time_to_middle(new Date().getTime())

        //         // main()
        //     }

            })


        console.log(timecell[0].beginTime,".....-")
        console.log(timecell[0].endTime,".....--")
        console.log(timecell[0].style.background,".....---")
        </script>
    </div>
</body>
